<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Back Button - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-content>
        <h3>Default</h3>
        <p>
          <ion-back-button aria-label="back button"></ion-back-button>
          <ion-back-button text="Back" aria-label="back button"></ion-back-button>
          <ion-back-button icon="add"></ion-back-button>
          <ion-back-button disabled text="Text Only" icon=""></ion-back-button>
          <ion-back-button icon="heart" text="Love" color="danger"></ion-back-button>
        </p>
        <p>
          <ion-back-button class="ion-focused"></ion-back-button>
          <ion-back-button class="ion-focused" text="Back"></ion-back-button>
          <ion-back-button class="ion-focused" icon="add"></ion-back-button>
          <ion-back-button disabled class="ion-focused" text="Text Only" icon=""></ion-back-button>
          <ion-back-button class="ion-focused" icon="heart" text="Love" color="danger"></ion-back-button>
        </p>

        <h3>Colors</h3>
        <p>
          <ion-back-button color="primary"></ion-back-button>
          <ion-back-button color="secondary"></ion-back-button>
          <ion-back-button color="tertiary"></ion-back-button>
          <ion-back-button color="success"></ion-back-button>
          <ion-back-button color="warning"></ion-back-button>
          <ion-back-button color="danger"></ion-back-button>
          <ion-back-button color="light"></ion-back-button>
          <ion-back-button color="medium"></ion-back-button>
          <ion-back-button color="dark"></ion-back-button>
        </p>
        <p>
          <ion-back-button color="primary" class="ion-focused"></ion-back-button>
          <ion-back-button color="secondary" class="ion-focused"></ion-back-button>
          <ion-back-button color="tertiary" class="ion-focused"></ion-back-button>
          <ion-back-button color="success" class="ion-focused"></ion-back-button>
          <ion-back-button color="warning" class="ion-focused"></ion-back-button>
          <ion-back-button color="danger" class="ion-focused"></ion-back-button>
          <ion-back-button color="light" class="ion-focused"></ion-back-button>
          <ion-back-button color="medium" class="ion-focused"></ion-back-button>
          <ion-back-button color="dark" class="ion-focused"></ion-back-button>
        </p>

        <h3>Custom</h3>

        <!-- Custom Font -->
        <p>
          <ion-back-button class="wide" text="wide"></ion-back-button>
          <ion-back-button class="large" text="large"></ion-back-button>
          <ion-back-button class="round" text="round"></ion-back-button>
          <ion-back-button class="small"></ion-back-button>
        </p>
        <p>
          <ion-back-button class="wide ion-focused" text="wide"></ion-back-button>
          <ion-back-button class="large ion-focused" text="large"></ion-back-button>
          <ion-back-button class="round ion-focused" text="round"></ion-back-button>
          <ion-back-button class="small ion-focused"></ion-back-button>
        </p>

        <!-- Custom Colors -->
        <p>
          <ion-back-button class="custom"></ion-back-button>
          <ion-back-button color="secondary" class="custom"></ion-back-button>
          <ion-back-button class="custom ion-focused"></ion-back-button>
          <ion-back-button color="secondary" class="custom ion-focused"></ion-back-button>
          <ion-back-button class="ripple"></ion-back-button>
          <ion-back-button class="ripple" color="primary"></ion-back-button>
        </p>

        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
            <ion-back-button class="ion-focused"></ion-back-button>
          </ion-buttons>
          <ion-title>Default</ion-title>
        </ion-toolbar>

        <ion-toolbar color="primary">
          <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
            <ion-back-button class="ion-focused"></ion-back-button>
          </ion-buttons>
          <ion-title>Primary</ion-title>
        </ion-toolbar>

        <ion-toolbar color="light">
          <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
            <ion-back-button class="ion-focused"></ion-back-button>
          </ion-buttons>
          <ion-title>Light</ion-title>
        </ion-toolbar>

        <ion-toolbar color="success">
          <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
            <ion-back-button class="ion-focused"></ion-back-button>
          </ion-buttons>
          <ion-title>Success</ion-title>
        </ion-toolbar>

        <ion-toolbar class="themed">
          <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
            <ion-back-button class="ion-focused"></ion-back-button>
          </ion-buttons>
          <ion-title>Themed</ion-title>
        </ion-toolbar>

        <ion-toolbar color="dark">
          <ion-buttons slot="start">
            <ion-back-button class="ion-hide"></ion-back-button>
          </ion-buttons>
          <ion-title>Hidden</ion-title>
        </ion-toolbar>
      </ion-content>
    </ion-app>

    <script>
      var buttons = document.querySelectorAll('ion-back-button');

      for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', (event) => onClick(event));
      }

      function onClick(ev) {
        console.log('clicked the button', ev.target.innerText);
      }
    </script>

    <style>
      h3 {
        padding-left: 16px;
      }

      p {
        padding-left: 8px;
      }

      ion-back-button {
        display: inline-block !important;
        vertical-align: middle;
      }

      .wide {
        --background: #d1f3ff;
        --background-hover: #add8e6;
        --background-hover-opacity: 1;
        --background-focused: #84c5db;
        --background-focused-opacity: 1;

        height: 50px;
        width: 150px;
      }

      .large {
        --icon-font-size: 32px;

        font-size: 32px;
        text-transform: capitalize;
      }

      .small {
        --icon-font-size: 15px;
      }

      .custom {
        --background: #ffdde2;
        --background-hover: #fcc6ce;
        --background-focused: lightpink;
        --color: rgb(214, 60, 235);
        --border-radius: 10px;
        --padding-start: 10px;
        --padding-end: 10px;
      }

      .custom:hover {
        opacity: 1;
      }

      .themed {
        --ion-toolbar-background: #222;
        --ion-toolbar-color: #ddd;
      }

      .ripple {
        --ripple-color: red;
      }
    </style>
  </body>
</html>
